<template>
    <div class="header">
      <el-menu class="el-menu-demo" mode="horizontal" active-text-color="black" router>
        <el-menu-item index="/home">首页</el-menu-item>
        <el-menu-item index="/tag">音乐</el-menu-item>
        <el-menu-item index="/timeline">时间线</el-menu-item>
        <el-menu-item index="/message">留言板</el-menu-item>
        <el-menu-item index="/about">关于</el-menu-item>
      </el-menu>
    </div>
</template>

<script>
export default {

}

</script>
<style scoped lang="scss">
/* pc端样式 */
@media screen and (min-width: 1200px) {
    .header {
      .el-menu-demo {
        background: rgb(238, 237, 237);
        padding: 3%;
        .el-menu-item {
          font-size: 18px;
          font-weight: 700;
          color: black;
        }
      }
    }
}

// 移动端样式
@media screen and (max-width: 768px){
    .header {
      .el-menu-demo {
        padding: 3% 0;
        background: rgb(238, 237, 237);
        .el-menu-item {
          color: black;
        }
      }
    }
}
</style>